<template>
	<view class="content">
		<view class="header">
			<view class="timeBox">
				<view class="starTime font28" @click="starOpen">
					<view class="title">
						开始日期：{{starTime}}
					</view>
					<view class="icon">
						<image src="https://wx.caobenjiankang.com/image/shopowner/date.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="endTime font28" @click="endOpen">
					<view class="title">
						结束日期：{{endTime}}
					</view>
					<view class="icon">
						<image src="https://wx.caobenjiankang.com/image/shopowner/date.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="product">
				<picker @change="productChange" :value="index" :range="productList">
					<view class="productB">
						<view class="uni-input">
							<view class="title font28">
								门店
							</view>
							<view class="des font28">
								{{productList[index]}}
							</view>
						</view>
						<view class="left">
							<view class="op font28">
								选择
							</view>
							<view class="icon">
								<image src="https://wx.caobenjiankang.com/image/shopowner/1.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>
				</picker>
			</view>
			<view class="query font28" @click="getshop()">
				查询
			</view>
		</view>
		<view class="box">
			<view class="table">
				<view class="item font28" v-for="(item,index) in tableTitle" :key="index">
					{{item}}
				</view>
			</view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
				<view class="total">
					<view class="statistics font28">
						合计
					</view>
					<view class="amount font28">
						{{Number(profitList.revenues) + Number(profitList.vip)}}
					</view>
					<view class="priceZ font28">
						{{profitList.revenues}}
					</view>
					<view class="vip font28">
						{{profitList.vip}}
					</view>
				</view>
				<view class="item" v-for="(item,index) in profitList.list" :key="index">
					<view class="time font28">
						{{item.date}}
					</view>
					<view class="drawer font28">
						{{Number(item.order_price) + Number(item.balance_price)}}
					</view>
					<view class="price font28">
						{{item.order_price}}
					</view>
					<view class="name font28">
						{{item.balance_price}}
					</view>
				</view>
			</scroll-view>
		</view>
		<yt-dateTimePicker ref="starShow" @submit="starTimes" :start-year="2000" :end-year="2099" :time-init="starTime"
			:time-hide="[true, true, true, false, false, false]" :time-label="['年', '月', '日', '时', '分', '秒']" />
		<yt-dateTimePicker ref="endShow" @submit="endTimes" :start-year="2000" :end-year="2099" :time-init="endTime"
			:time-hide="[true, true, true, false, false, false]" :time-label="['年', '月', '日', '时', '分', '秒']" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				starTime: '', //开始时间
				endTime: '', // 结束时间
				index: 0,
				productList: [],
				tableTitle: [
					'收款时间', '收款合计', '项目收入', '会员收入'
				],
				profitList: {
					revenues: 0,
					vip: 0,
					list: []
				},
				list: [],
				option:{}
			};
		},
		onLoad(option) {
			this.option = option
			this.getCurrentTime()
			this.getData(option.type)
		},
		methods: {
			async getData(type) {
				if(type == 0){
					let data = await this.$api.shopowner.storeList()
					if (data.length > 0) {
						this.list = data
						const list = []
						data.map(item => {
							list.push(item.title)
						})
						this.productList = list
						this.getshop()
					}
					if(data.length == 0){
						this.productList = ['请选择']
					}
				}
				if(type == 1){
					let data = await this.$api.shopowner.shareholderStoreList()
					if (data.length > 0) {
						this.list = data
						const list = []
						data.map(item => {
							list.push(item.title)
						})
						this.productList = list
						this.getshop()
					}
					if(data.length == 0){
						this.productList = ['请选择']
					}
				}
				
			},
			async getshop() {
				let data = await this.$api.shopowner.storeRevenue({
					start_time: this.starTime,
					end_time: this.endTime,
					store_id: this.list[this.index].id
				})
				this.profitList.list = data
				let r = 0
				data.map(item => {
					r = r + Number(item.order_price)
				})
				this.profitList.revenues = r.toFixed(2)
				let vip = 0
				data.map(item => {
					vip = vip + Number(item.balance_price)
				})
				this.profitList.vip = vip.toFixed(2)
			},
			getCurrentTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				const seconds = String(now.getSeconds()).padStart(2, '0');
				this.starTime = `${year}-${month}-${day}`;
				this.endTime = `${year}-${month}-${day}`;
			},
			productChange(e) {
				this.index = e.detail.value
			},
			starOpen() {
				this.$refs.starShow.show();
			},
			endOpen() {
				this.$refs.endShow.show();
			},
			starClose() {
				this.$refs.starShow.hide();
			},
			endClose() {
				this.$refs.endShow.hide();
			},
			// 开始时间
			starTimes(e) {
				this.starTime = `${e.year}-${e.month}-${e.day}`;
			},
			// 结束时间
			endTimes(e) {
				this.endTime = `${e.year}-${e.month}-${e.day}`;
			},
			query() {

			}
		}
	}
</script>

<style lang="scss">
	.content {
		.header {
			background-color: #fff;
			padding: 36rpx 37rpx;
			margin-bottom: 16rpx;

			.timeBox {
				.starTime {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border: 2rpx solid #DFDFDF;
					margin-bottom: 18rpx;
					padding: 30rpx 18rpx;

					.title {
						color: #333333;
					}

					.icon {
						width: 30rpx;
						height: 30rpx;

						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}

				.endTime {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border: 2rpx solid #DFDFDF;
					margin-bottom: 18rpx;
					padding: 30rpx 18rpx;

					.title {
						color: #333333;
					}

					.icon {
						width: 30rpx;
						height: 30rpx;

						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}

			}

			.product {
				border: 2rpx solid #DFDFDF;
				padding: 30rpx 18rpx;
				margin-bottom: 25rpx;

				.productB {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.uni-input {
						display: flex;
						align-items: center;

						.title {
							color: #333333;
							margin-right: 31rpx;
						}

						.des {
							color: #666666;
							;
						}
					}

					.left {
						.op {
							color: #666666;
						}

						.icon {
							width: 13rpx;
							height: 26rpx;
							display: flex;
							align-items: center;

							image {
								width: 13rpx;
								height: 26rpx;
							}
						}
					}
				}
			}

			.query {
				background: #1EB481;
				border-radius: 20rpx;
				height: 75rpx;
				color: #fff;
				text-align: center;
				line-height: 75rpx;
			}
		}

		.box {
			background-color: #fff;

			.table {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr;
				padding: 32rpx 29rpx;
				border-bottom: 2rpx solid #DFDFDF;
				justify-items: center;

				.item {
					color: #999999;
				}
			}

			.scroll-Y {
				height: calc(100vh - 512rpx - 32rpx - 104rpx - var(--status-bar-height));

				.total {
					display: grid;
					grid-template-columns: 1fr 1fr 1fr 1fr;
					justify-items: center;
					padding: 32rpx 29rpx;
					border-bottom: 2rpx solid #DFDFDF;

					.statistics {
						color: #FF3333;
					}

					.amount {
						color: #FF3333;
					}

					.priceZ {
						color: #FF3333;
					}

					.vip {
						color: #FF3333;
					}
				}

				.item {
					display: grid;
					grid-template-columns: 1fr 1fr 1fr 1fr;
					justify-items: center;
					padding: 32rpx 29rpx;
					border-bottom: 2rpx solid #DFDFDF;

					.name {
						color: #333333;
					}

					.drawer {
						color: #333333;
					}

					.price {
						color: #333333;
					}

					.time {
						color: #1EB481;
					}
				}
			}
		}
	}
</style>